<template>
  <k-view :class="['stock-rank-card', rankTagClass]">
    <k-view class="card-content-line">
      <k-text class="rank-card-title">{{ cardInfo.title }}</k-text>
    </k-view>
    <k-view class="card-content-line" @click="stockClickAction">
      <k-text class="rank-card-info">{{ cardInfo.info }}</k-text>
    </k-view>
    <k-view class="card-content-line">
      <k-text class="rank-card-sub-info">{{ cardInfo.subInfo.name }}</k-text>
      <k-image
        v-if="cardInfo.subInfo.color !== 'black'"
        :src="cardInfo.subInfo.color === 'red' ? numUp : numDown"
        class="sub-info-icon"
      ></k-image>
      <k-text :class="['rank-card-sub-info num-j-r', cardInfo.subInfo.color]">{{
        cardInfo.subInfo.score
      }}</k-text>
    </k-view>
  </k-view>
</template>

<script>
import numUp from '../../assets/index/num_up.png';
import numDown from '../../assets/index/num_down.png';
import { jumpByUrl } from '@/utils';

const defaultInfo = {
  type: '',
  title: '',
  stockInfo: {
    stockCode: '',
    market: '',
  },
  info: '',
  subInfo: {
    name: '',
    score: 0,
    color: 'black',
  },
};

export default {
  props: {
    cardInfo: {
      type: Object,
      default: defaultInfo,
      required: true,
    },
  },
  data() {
    return {
      numUp,
      numDown,
    };
  },
  methods: {
    stockClickAction() {
      if (this.cardInfo.type && this.cardInfo.type === 'stock') {
        this.$emit('clickAction', this.cardInfo);
        //跳转至个股诊断，需要接口支持
        jumpByUrl({
          name: 'stock',
          query: {
            stockCode: this.cardInfo.stockInfo.stockCode,
            market: this.cardInfo.stockInfo.market,
            stockName: this.cardInfo.info,
          },
        });
      }
    },
  },
  computed: {
    rankTagClass() {
      return this.cardInfo.tagInfo ? `stock-rank-card-bg-${this.cardInfo.tagInfo.rank}` : '';
    },
  },
};
</script>

<style lang="less">
.stock-rank-card {
  width: calc(33vw - 32px);
  background-color: #fafafa;
  border-radius: 8px;
  padding: 32px 0px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-repeat: no-repeat;
  background-size: 70px 32px;
  background-position: left top;

  .card-content-line {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 44px;
  }
  .rank-card-title {
    font-size: 28px;
    color: #595959;
    font-weight: 400;
  }
  .rank-card-info {
    font-size: 32px;
    color: #262626;
    font-weight: 500;
    margin-top: 4px;
  }
  .rank-card-sub-info {
    font-size: 24px;
    color: #b3b3b3;
    font-weight: 400;
    margin-top: 4px;
    margin-right: 6px;
  }
  .sub-info-icon {
    width: 20px;
    height: 20px;
    margin-right: 4px;
  }
  .rank-card-sub-info.red {
    color: #ff2436;
    font-weight: 500;
    margin-top: 0px;
  }
  .rank-card-sub-info.green {
    color: #07ab4b;
    font-weight: 500;
    margin-top: 0px;
  }
  .rank-card-sub-info.black {
    color: #595959;
    font-weight: 500;
    margin-top: 0px;
  }
}
.stock-rank-card-bg-1 {
  background-image: url(../../assets/index/N01_tag.png);
}
.stock-rank-card-bg-2 {
  background-image: url(../../assets/index/N02_tag.png);
}
.stock-rank-card-bg-3 {
  background-image: url(../../assets/index/N03_tag.png);
}

[theme-mode='black'] {
  .stock-rank-card {
    background-color: #212121;
    .rank-card-title {
      color: rgba(255, 255, 255, 0.6);
    }
    .rank-card-info {
      color: rgba(255, 255, 255, 0.84);
    }
    .rank-card-sub-info.black {
      color: rgba(255, 255, 255, 0.6);
    }
  }
}
</style>
